<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"/>
    <title>统计</title>
    <link rel="stylesheet" href="css/weui.css" />
    <link href="css/tj.css" rel="stylesheet" type="text/css">
    <script src="echarts/echarts.js"></script>
   
</head>
<style>
.sel1 option{
	width: 30%;
}	
	html, body {
      position: relative;
      height: 100%;
     
    }
    body {
    	
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
</style>
<body  class="page">
<p class="p1">所在位置：对接成果信息·统计</p>


<div class="div1" style="width: 80%;">
    <label class="p2">所在院校： </label>
    <select class="sel1">
        <option selected disabled></option>
        <option>马克思主义学院</option>
        <option>政法学院</option>
        <option>教育学院</option>
        <option>体育学院</option>
        <option>文学与传媒学院</option>
        <option>外国语学院</option>
        <option>数学与统计学院</option>
        <option>计算机工程学院</option>
        <option>汽车与交通工程学院</option>
        <option>机械工程学院</option>
        <option>土木工程与建筑学院</option>
        <option>食品科学技术学院·化学工程学院</option>
        <option>医学院</option>
        <option>资源环境与旅游学院</option>
        <option>经济管理学院</option>
        <option>美术学院</option>
        <option>音乐与舞蹈学院</option>
    </select>
    <button class="ss1">搜索</button>
    <div class="div_sel">
        <label class="p3">&nbsp;按：&nbsp;</label><select class="sel1" id="time" onchange="getopt()">
        <option selected disabled>--请选择--</option>
        <option >年</option>
        <option>季度</option>
        <option>月</option>
    </select>
        <label class="p2">统计</label>
        <select class="sel1" id="nian">
            <option>--请选择</option>
            <option>2014年</option>
            <option>2015年</option>
            <option>2016年</option>
            <option>2017年</option>
        </select>
        <br/>
        <label class="p3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <select class="sel1" id="opt" onchange="changea()"></select>
        <label class="p2">至</label>
        <select class="sel1" id="opt1"></select>
        <br/>
        <label class="p3">按：&nbsp;</label>
        <select class="sel1">
            <option selected></option>
            <option>发明专利</option>
            <option>实用新型专利</option>
            <option>外观专利</option>
            <option>经济效益</option>
        </select>
        <label class="p2">统计</label>
    </div>
</div>


    <div id="chartmain"  style="width:80%; height:20rem;"></div>
    <div id="chartmain1" style="width:80%; height:20rem;"></div>
    <div id="chartmain2" style="width:80%; height:20rem;"></div>
    <div id="chartmain3" style="width:80%; height:20rem;"></div> 


<!--<div class="div3">-->

<!--</div>-->

</body>

<script>
	

    option = {
        title : {
            text: '按年',
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
//            data:['成果数量','成员数量','经济效益']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['2010','2011','2012','2013','2014','2015','2016','2017']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:' 成果联系数量',
                type:'bar',
                data:[2, 4, 0, 2, 6, 7, 13, 22],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'成员数量',
                type:'bar',
                data:[3,12,15,7,4,20,24,18],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            },
            {
                name:'经济效益',
                type:'bar',
                data:[2.6, 5.9, 9.0, 2.4, 2.7, 7.7, 15.6, 12.2],
                markPoint : {
                    data : [
                        {name : '年最高', value : 15.6, xAxis: 7, yAxis: 15.6, symbolSize:5},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            },

        ]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
    //使用制定的配置项和数据显示图表
    myChart.setOption(option);

    option1 = {
        title : {
            text: '成果联系数量',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['2018','2017','2016','2015','2014']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'成果联系数量',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'2018'},
                    {value:310, name:'2017'},
                    {value:234, name:'2016'},
                    {value:135, name:'2015'},
                    {value:1548, name:'2014'}
                ]
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('chartmain1'));
    //使用制定的配置项和数据显示图表
    myChart.setOption(option1);

    option2 = {
        title : {
            text: '成员数量',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['2018','2017','2016','2015','2014']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'成员联系数量',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'2018'},
                    {value:310, name:'2017'},
                    {value:234, name:'2016'},
                    {value:135, name:'2015'},
                    {value:1548, name:'2014'}
                ]
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('chartmain2'));
    //使用制定的配置项和数据显示图表
    myChart.setOption(option2);

    option3 = {
        title : {
            text: '经济效益',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['2018','2017','2016','2015','2014']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'经济效益',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'2018'},
                    {value:310, name:'2017'},
                    {value:234, name:'2016'},
                    {value:135, name:'2015'},
                    {value:1548, name:'2014'}
                ]
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('chartmain3'));
    //使用制定的配置项和数据显示图表
    myChart.setOption(option3);


    var timeArr =new Array();
    timeArr["年"]=["2010年","2011年","2012年","2013年","2014年","2015年","2016年","2017年","2018年"] ;
    timeArr["季度"]=["第一季度","第二季度","第三季度","第四季度"] ;
    timeArr["月"]=["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"] ;

    function gettime(){
        var s =document.getElementById("time");

        for(var v in timeArr){
            s.add(new Option(v,v),null);
        }
    }
    function getopt(){
        var s =document.getElementById("time");
        var c =document.getElementById("opt");
        var a =document.getElementById("opt1");
        var v=s.value;
        c.options.length =0;
        a.options.length =0;

        for(var i in timeArr[v]){
            c.add(new Option(timeArr[v][i],timeArr[v][i]),null);
           a.add(new Option(timeArr[v][i],timeArr[v][i]),null);
            if(v!="年"){
                document.getElementById("nian").style.visibility="visible";
            }
        }
        
         if(v!="年"){
            document.getElementById("nian").style.visibility="visible";
        }else {
            document.getElementById("nian").style.visibility="hidden";
        }
        
        
        

    }
    
    
    function changea(){
    		var year1=document.getElementById("opt").value;
    		var s =document.getElementById("time");
    		var v=s.value;    		 
    		var y1;
    		if(v=="年"){
    			var y=year1.substring(3,4);
    			y1=parseInt(y);
    		}if(v=="月"){
    			var y=year1.substring(0,2);
    			if(isNaN(y)){
    				y=year1.substring(0,1);
    				y1=parseInt(y)-1;  			 
    			}else{
    				y1=parseInt(y)-1;    			 
    			}    			 
    		}if(v=="季度"){
    			var y1=year1.substring(1,2);
    			if(y1=="一"){
    				y=0;
    			}if(y1=="二"){
    				y=1;
    			}if(y1=="三"){
    				y=2;
    			}if(y1=="四"){
    				y=3;
    			}
    		 	y1=parseInt(y);
    		}	 
    		var timeArr1 =new Array();
    		timeArr1[v]=timeArr[v].slice(y1);
    		var a =document.getElementById("opt1");
    		a.options.length =0;   			 
  			for(var i in timeArr1[v]){
            		a.add(new Option(timeArr1[v][i],timeArr1[v][i]),null);
            	if(v!="年"){
                document.getElementById("nian").style.visibility="visible";
           	}
       } 		 
    }
</script>
</html>